<template>
  <div v-loading="floorRoomSign">
    <div>
      <!-- 按钮组 -->
      <div style="height: 60px;line-height: 60px;">
        <div style="float: left;">
          <el-button v-if="setState == 1" @click="setReserveOrder" :disabled="info.peopleEntity.state != 4">修改预定</el-button>
          <el-button v-if="info.peopleEntity.state == 4 && setState == 1 && isAuth('hotel:thotelfloorroomsinglereserve:cancel_reserve_single')" @click="cancelReserveOrder">取消预定</el-button>
          <el-button v-if="info.peopleEntity.state == 5 && setState == 1 && isAuth('hotel:thotelfloorroomsinglereserve:recovery_reserve_single')" @click="recoveryReserveOrder">恢复预定</el-button>
          <el-button v-if="info.peopleEntity.state == 5 && setState == 1" @click="deleteReserveOrder">删除预定</el-button>
          <el-button v-if="setState == 2" @click="confirmSetReserveOrder">确认修改</el-button>
          <el-button v-if="setState == 2" @click="cancelSetReserveOrder">取消修改</el-button>
          <el-button v-if="setState == 1 && isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" @click="joinRoomBtn(info.peopleEntity.singleId)" :disabled="info.peopleEntity.state != 4">
            <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-lianhe"></i>合并联房
          </el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <reserveInfo ref="reserveInfo" v-if="setState == 1" @refreClosing="unRoom"></reserveInfo>
      <reserveSet ref="reserveSet" v-if="setState == 2" @refreClosing="unRoom"></reserveSet>
      <joinRoom v-if="joinRoomVisible" ref="joinRoom" @refreClosing="unRoom" @refreshDataList="getInfo()"></joinRoom>
      <cancelReserve v-if="cancelReserveVisible" ref="cancelReserve" @refreClosing="unRoom" @refreshDataList="getInfo()"></cancelReserve>

    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  import reserveInfo from './reserve-info';
  import cancelReserve from './cancel-reserve';
  import reserveSet from './reserve-set';
  import joinRoom from './join/index.vue';
  export default {
    data() {
      return {
        deleteSign:false,
        floorRoomSign: false,
        joinRoomVisible: false,
        cancelReserveVisible: false,
        setState: 1,
        currData: '',
        popInfo: {},
        info: {
          peopleEntity: {},
          singleEntity: {},
          singleReserveEntities: {}
        }
      };
    },
    components: {
      reserveInfo,
      reserveSet,
      joinRoom,
      cancelReserve
    },
    methods: {
      unRoom() {
        this.$emit('refreClosing');
      },
	  deleteReserveOrder(){
		  this.$confirm('此操作将删除该预定单, 是否继续?', '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {

		    this.$http({
		      url: this.$http.adornUrl(
		        `/hotel/thotelfloorroomcheckinsingle/deleteReserve`
		      ),
		      method: "get",
		      params: this.$http.adornParams({
		        peopleId: this.info.peopleEntity.id
		      }),
		    }).then(({
		      data
		    }) => {
		      if (data && data.code === 0) {
            this.deleteSign = true;
		        this.unRoom();
		        this.$message({
		          message: this.$t("Common.OperationSuccessful"),
		          type: "success",
		          duration: 1500,
		          onClose: () => {

		          },
		        });
		      } else {
		        this.$message.error(data.msg);
		      }

		    });

		  }).catch(() => {

		  });
	  },
      viewCurrInfoOrderBtn(row) {
        this.$nextTick(() => {
          var that = this
          setTimeout(() => {
            that.$emit("viewCurrInfoOrder", row.floorRoomId)
            // that.$parent.viewCurrInfoOrderBtn(row.floorRoomId);
          }, 10)
        });
      },
      //确认修改
      confirmSetReserveOrder() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.reserveSet.dataFormSubmit();
          }, 10)
        });
      },
      // 加入联房
      joinRoomBtn(singleId) {
        this.joinRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.joinRoom.init(singleId);
        });
      },
      //取消修改
      cancelSetReserveOrder() {
        this.setState = 1;
        this.getInfo()
      },
      //修改订单
      setReserveOrder() {
        this.setState = 2;
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.reserveSet.init(this.info.singleEntity, this.info.singleReserveEntities, this.info.peopleEntity);
          }, 10)
        });
      },
      //取消订单
      cancelReserveOrder() {
        this.cancelReserveVisible = true;
        this.$nextTick(() => {
          this.$refs.cancelReserve.init(this.info.peopleEntity.id, this.info.singleEntity.id);
        })
        // this.$confirm('确定取消预订单?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   //发起请求
        //   this.$http({
        //     url: this.$http.adornUrl(`/hotel/roomReservation/cancel_reserve_single/${this.info.singleEntity.id}`),
        //     method: 'get',
        //     params: this.$http.adornParams({
        //       peopleId:this.info.peopleEntity.id
        //     })
        //   }).then( async ({ data }) => {
        //     if (data && data.code === 0) {
        //       this.getInfo();
        //       this.$message({
        //         message: "操作成功",
        //         type: "success",
        //         duration: 1500
        //       });
        //     } else {
        //       this.$message.error(data.msg);
        //     }
        //   });
        // }).catch(() => {

        // });
      },
      //加入联房
      joinUnitedRoom() {

      },
      //恢复预订单
      recoveryReserveOrder() {
        this.$confirm('确定恢复预订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发起请求
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/roomReservation/recovery_reserve_single/${this.info.singleEntity.id}`),
            method: 'get',
            params: this.$http.adornParams({
              peopleId: this.info.peopleEntity.id
            })
          }).then(async ({
            data
          }) => {
            if (data && data.code === 0) {
              this.getInfo();
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }).catch(() => {

        });
      },
      init(pop) {
        this.popInfo = pop;
        this.getInfo();

      },
      getInfo() {
        this.floorRoomSign = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/pop_single/${this.popInfo.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.info.peopleEntity = data.data.peopleEntity;
            this.info.singleEntity = data.data.singleEntity;
            this.info.singleReserveEntities = data.data.singleReserveEntities;
            this.$nextTick(() => {
              setTimeout(() => {
                this.$refs.reserveInfo.init(this.info.singleEntity, this.info.singleReserveEntities, this.info
                  .peopleEntity);
                this.$refs.reserveSet.init(this.info.singleEntity, this.info.singleReserveEntities, this.info
                  .peopleEntity);
              }, 100)
            });
          } else {
            this.$message.error(data.msg);
          }
          this.floorRoomSign = false;
        });
      }
    }
  };
</script>

<style>
  .checkin_info_summary table th {
    padding-top: 15px;
    color: #666;
    text-align: center;
  }

/*  .checkin_info_summary table tr th:last-of-type {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background: #f24e4c;
    color: #fff;
  }

  .checkin_info_summary table tr td:last-of-type {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #f24e4c;
    color: #fff;
  } */

  .checkin_info_summary table td {
    height: 48px;
    color: #151515;
    text-align: center;
  }
</style>
